<template>
    <view class='head'>
		<view class="userInfo">
			<view class="user">
				头像
			</view>
			<view class="tel">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				  <image class="avatar" :src="user_img?user_img:'http://fsl-test.dderp.cn:33548/adh-mini//my/my_system_avatars.png'"></image>
				</button> 
				<!-- <image src="http://fsl-test.dderp.cn:33548/adh-mini//my/my_system_avatars.png" mode=""></image> -->
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				用户名
			</view>
			<view class="tel">
				{{session.XM}}
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				登录账号
			</view>
			<view class="tel">
				{{session.SJ}}
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				公司
			</view>
			<view class="tel">
				{{session.SYSTEMFHD}}
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				门店
			</view>
			<view class="tel">
				{{session.BRAND_CNNAME}}
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				职位
			</view>
			<view class="tel">
				{{session.YHZ}}
			</view>
		</view>
		<view class="userInfo">
			<view class="user">
				登录账号
			</view>
			<view class="tel">
				18800000001
			</view>
		</view>
		<view class="btn" @click="outLogin">
			退出登录
		</view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
onShow(()=>{
	user_img.value = uni.getStorageSync('avatarUrl')
})
const session = ref('')
const user_img = ref('')
onLoad(()=>{
	session.value = uni.getStorageSync('session')
})
const chooseavatar =(e)=>{
	uni.setStorageSync('avatarUrl',e.detail.avatarUrl)
	user_img.value = e.detail.avatarUrl
}
const outLogin =()=>{
	uni.removeStorageSync('token')
	uni.showLoading({
		title:'退出中'
	})
	setTimeout(()=>{
		uni.reLaunch({
			url:'/pages/login/login'
		})
		uni.hideLoading()
	},1000)
}
</script>
<style scoped lang='scss'>
	
	.head{
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.userInfo{
			border-bottom: 1px solid #eaeaea;
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			.user{
				color: #555;
				font-size: 28rpx;
			}
			.tel{
				color: #999;
				font-size: 28rpx;
				image{
					width: 100rpx;
					height: 100rpx;
				}
				button{
					width: 100rpx;
					height: 100rpx;
					padding: 0 !important;
					background-color: rgba(0, 0, 0, 0);
					border: none !important;
					border-radius: 50%;
				}
			}
		}
		.btn{
			position: fixed;
			bottom: 60rpx;
			width: 90%;
			text-align: center;
			line-height: 100rpx;
			border-radius: 10rpx;
			border: 1px solid #c04038;
			color: #c04038;
			left: 50%;
			transform: translate(-50%);
			font-weight: 700;
		}
	}
</style>